
import React, {Component} from 'react';
import { StyleSheet, 
  Text, 
  View, 
  Image, 
  TouchableOpacity,
  FlatList,
  InteractionManager
} from 'react-native';

import Loading from '@/components/Loading'
import {jumpPage} from '@/util/common'
import EasyToast from '@/components/EasyToast'
import Toast, {DURATION} from 'react-native-easy-toast'
export default class GridView extends Component{
  constructor(props){
    super(props)
    this.state = ({
      data: [],
      loading: true
    })
  }
  componentDidMount(){
    this._getData()
  }
  _getData(){
    fetch('http://v.juhe.cn/toutiao/index?type=&key=beadf9b3bf5bd13b25f5ef0684a8ea56')
    .then(res => res.json())
    .then(result => {
      //console.log(result)
      if(result.result && result.error_code == 0){
        this.setState({
          data: result.result.data,
          loading: false
        })
      } else {
        const data = require('./data.json')
        this.setState({
          data: data.result.data,
          loading: false
        },()=>{
          //console.log('refs',this.refs)
          if(this.refs.toast) this.refs.toast.show(result.reason);
          
        })
        
      }
    })
  }
  _goDetail(url){
    jumpPage(this.props.navigation, 'newsDetail', {url})
  }
  _renderItem = ({item}) => {
    let pic = item.thumbnail_pic_s
    let img
    if(pic) {
      img = {uri: pic}
    } else {
      img = require('@/images/home/no_image.png')
    }
    return(
      <View style={styles.list}>
        <Image style={styles.listImg} source={img}/>
        <TouchableOpacity style={styles.subView} onPress={()=> this._goDetail(item.url)}>
          <Text style={styles.title} >{item.title}</Text>
          <View style={styles.textWrap}>
            <Text style={styles.grayText}>{item.author_name}</Text>
            <Text style={styles.grayText}>{item.date}</Text>
          </View>
        </TouchableOpacity>
      </View>
    )
  }
  _keyExtractor = (item, index) => index.toString();
  render(){
    return(
      <View style={{flex:1}}>
        <View style={styles.titleView}>
          <Image style={styles.titltImg} source={require('@/images/home/title_left.png')}/>
          <Text style={styles.titleText}>热点新闻</Text>
          <Image style={styles.titltImg} source={require('@/images/home/title_right.png')}/>
        </View>
        {
          this.state.loading ? <Loading /> :
          <FlatList
            data={this.state.data}
            renderItem={this._renderItem}
            keyExtractor={this._keyExtractor}
          />
        }
        <Toast ref='toast' position='bottom' positionValue={200} />
      </View>
    )
  }
}
const styles = StyleSheet.create({
  titleText: {
    color: '#00CABF'
  },
  titleView: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  titltImg: {
    flex:1,
    margin: 10,
    resizeMode: 'contain'
  },
  textWrap: {
    marginTop: 10,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  grayText: {
    color: '#aaa',
    fontSize: 12,
  },
  subView: {
    flex: 1, 
    marginLeft: 10,
    flexDirection: 'column',
    justifyContent: 'space-between',
  },
  title: {
    fontSize:15,
    color: '#666'
    //flexWrap: 'wrap'
  },  
  listImg: {
    width: 60,
    height: 60,
    borderRadius: 5
  },
  list: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 10,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#bbb'
  }
})
